今天我們將介紹 Nuxt 3 專案的目錄結構。如果你還沒有建立 Nuxt 3 專案，可以參考 Day 4 – 建立第一個 Nuxt 3 專案 會一步步帶領你建立 Nuxt 3 專案。

初始化資料結構

以下是使用 nuxi 建立的初始化專案。

nuxt-project 
 ┣ .nuxt            
 ┣ node_modules      
 ┣ public           
 ┃ ┗ favicon.ico    
 ┣ server           
 ┃ ┗ tsconfig.json  
 ┣ .gitignore       
 ┣ .npmrc           
 ┣ app.vue         
 ┣ nuxt.config.ts   
 ┣ package.json     
 ┣ pnpm-lock.yaml   
 ┣ README.md        
 ┗ tsconfig.json    

.nuxt

在開發環境編譯過程中自動產生的 Vue 應用程式，執行 nuxt dev 時自動產生的暫存檔案。

⚠️ 因為是自動產生的檔案，如果手動變更檔案內容，會被覆蓋。

node_modules

專案相依套件，使用套件管理工具安裝的套件。

public

靜態檔案，如 favicon.ico、robots.txt，會在伺服器根目錄底下產生對應 public/ 路徑的檔案。

// 在開發或正式環境都可以透過 {url}/images/favicon.ico 取得 icon
public
  ┣ images 
  ┃   ┗ favicon.ico

server

在 Day3 – Nuxt 3 核心功能概念（下）有提過 Nuxt 3 使用 Nitro 讓我們可以在後端建立 api、routes 及 middleware。

server/tsconfig.json

server/ 的 typescript 管理文件，預設對應至自動產生的 ../.nuxt/tsconfig.server.json。

.gitignore

Git 忽略文件設定，預設包含 node_modules、.output... 等透過程式碼設定自動產出的檔案。

.npmrc

套件管理工具環境變數檔。

app.vue

主元件，會在此檔案設定 pages/ 對應的 <NuxtPage/> 位置。如果有用到 layout 也會在 app.vue 設定 <NuxtLayout>。

⚠️ 在 app.vue 引入的 js 或 css 會被當作全域引入。

nuxt.config.ts

nuxt的管理文件。

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },    //開啟瀏覽器devtool的功能
  modules: ['@nuxt/content'],     //設定使用的modules
  css: ['@/assets/css/main.scss'] //設定全域的css
})

package.json

套件資訊、撰寫腳本。

pnpm-lock.yaml

套件詳細資訊。

README.md

專案說明書，通常會包含專案介紹、運行環境、注意事項...等，供其他開發人員更容易快速了解專案。

tsconfig.json

typescript 的管理文件。預設對應至自動產生的 ./.nuxt/tsconfig.json。

通常還會用到的檔案

當然，有開發過 Vue 專案一定會發現少了一些東西，通常我們會用 Vue Router 來控制 route 及 pages，而一個 page 有可能會由 layouts 和 components 組成，以下將介紹在專案中可能會需要檔案。

components

元件，幫助我們減少在專案中的代碼重複。Nuxt 3 會自動 import，元件名稱會是檔案名稱。
關於如何建立元件可以參考 Components Basics。

pages

頁面，自動建立對應 route（整合 vue-router）。
須在 app.vue 加入 <NuxtPage /> 元件指定 page 的位置。

⚠️ 每個頁面都只能有一個根元素，註解的文字也會被當作一個元素。

layouts

模板，根元素只能是單一元素且模板內必須含有 <slot />，用來定位 route 模板內容對應 <NuxtLayout> 的位置，須注意 <slot /> 不能是根元素。
依專案需求使用，如果只有一個模板的話，官方文件建議可以直接在 app.vue 定義模板就好。

middleware

中介軟體，在 router 轉換到下個 page 之前設定的執行動作。例如：權限驗證。

assets

網站內部使用的靜態檔案，包含樣式設定、字型、圖片，會經過 webpack 或 Vite 編譯打包。

utils

輔助函式，建立自訂義的函式幫助我們減少在專案中的代碼重複，Nuxt 3 會自動 import。

composables

組合式函數，可重用的函數，明天會詳細介紹。

🌞 Upcoming

今天介紹 Nuxt 3 目錄結構的基本概念，明天我們將深入探討當有共用函式時 Nuxt 3 如何協助我們更輕鬆地進行開發。

參考資料

Nuxt.js 3.x 目錄結構 Directory Structure
HTML靜態資源
Directory Structure